<style scoped>
.order {
  /* z-index:1000; */
  background-color: #fff;
}
.order >>> .van-cell__value span {
  white-space: nowrap;
  font-size: 12px;
}
.order .preson {
  margin: 10px;
  padding: 4px;
  border: 1px solid var(--hui);
}
.order .preson h4 {
  display: flex;
  line-height: 40px;
  align-items: center;
  padding-bottom: 0px;
  border-bottom: 1px solid var(--hui);
}
.order .preson h4 span {
  font-size: 16 px !important;
}
.order .preson {
  line-height: 40px;
}
.order .preson .t {
  border-bottom: 1px solid var(--hui);
}
.order .preson .time {
  font-size: 16px;
  display: flex;
  justify-content: left;
  align-items: center;
}
.order .preson .time > span {
  padding: 0 10px;
}
.order .preson .selectBox {
  text-align: right;
  display: flex;
  justify-content: left;
  align-items: center;
}
.order .preson .selectBox > span {
  margin-right: 4px;
  font-size: 14px;
}
.order .preson .find {
  height: 100%;
  display: flex;
  padding: 20px 0 0;
  color: #ccc;
  border-left: 1px solid var(--hui);
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.order .preson > .l .user >>> .van-icon {
  font-size: 22px;
  position: relative;
  left: -15px;
}
.order .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.order .payment_type .content .top {
  text-align: center;
}
.order .payment_type .content .top > p {
  margin: 10px 0;
}
.order .payment_type .content .top .money {
  font-size: 26px;
}
.order .payment_type .content .top .money span {
  color: red;
}
.order .payment_type .content .top .discounts .yet_dis {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  color: rgb(150, 150, 150);
}
.order .payment_type .content .pay_icon {
  font-size: 24px;
  color: #24db5a;
}
.order .payment_type .content .pay_icon.icon-zhifubao {
  font-size: 28px;
  color: #02a9f1;
}
.order .payment_type .content .van-cell__title {
  padding-left: 10px;
}
.order .payment_type .content .van-cell__title .pay_type {
  font-size: 16px;
}
.order .payment_type .content .van-cell__title .pay_type span {
  font-size: 12px;
  display: inline-block;
  padding: 0px 5px;
  border-radius: 4px;
  border: 1px solid #f5b53a;
  color: #f5b53a;
}
.order .payment_type .content .van-cell__title .pay_txt {
  font-size: 12px;
  color: rgb(161, 158, 158);
}
.order .payment_type .content .btn button {
  border: none;
  border-radius: 0px;
}
.order .inp_pwd .price {
  text-align: center;
  font-size: 24px;
  color: #ff6500;
  margin: 20px 0;
}
.order .inp_pwd .inp_pwd_demo {
  margin-bottom: 20px;
}
.order .van-number-keyboard {
  z-index: 9000;
}
</style>
<template>
  <div class="order fixed">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="确定订单"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <!-- cell菜单 -->
    <div class="box">
      <van-cell
        title="额外需求"
        is-link
        icon="apps-o"
        value="是否需要搬运，回单等服务"
        @click="show = true"
      />
      <van-cell
        title="订单修改"
        is-link
        icon="edit"
        value="如货物类别或跟车人数"
        @click="show2 = true"
      />
      <van-cell title="优先发订单给我的司机" icon="manager-o">
        <template #right-icon>
          <van-switch v-model="checked" size="24px" />
        </template>
      </van-cell>
    </div>
    <!-- 订单联系人 -->
    <div class="preson">
      <h4>
        <van-icon name="label-o" size="22px" />
        <span>订单联系人资料</span>
      </h4>
      <!-- 选择日期 -->
      <van-row class="t">
        <van-col class="time" span="20">
          <van-icon name="underway-o" size="22px" />
          <!-- 年月日 -->
          <span @click="year = true">
            {{ yearDate }}
          </span>
          <!-- 今天时间 -->
          <span @click="hour = true">{{ currentDate }}</span>
        </van-col>
        <van-col
          class="selectBox"
          span="4"
          @click="immediatelyOff = !immediatelyOff"
        >
          <span>{{ columnsMsg }}</span>
          <van-icon v-if="!immediatelyOff" name="arrow-down" />
          <van-icon v-else name="arrow-up" />
        </van-col>
      </van-row>
      <!-- 联系人 -->
      <van-row class="l">
        <van-col class="user" span="18">
          <van-cell-group>
            <van-field
              v-model="relation.name"
              clearable
              size="100px"
              left-icon="user-circle-o"
              placeholder="输入名字"
            />
            <van-field
              v-model="relation.phone"
              clearable
              type="tel"
              left-icon="phone-o"
              placeholder="输入手机号码"
            />
          </van-cell-group>
        </van-col>
        <van-col class="find" span="6" @click="findPerson">
          <van-icon size="22px" name="newspaper-o" />
          <p>查找通讯录</p>
        </van-col>
      </van-row>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <PriceBox></PriceBox>
      <van-button
        color="rgb(255,102,0)"
        @click="paymentType = true"
        type="primary"
        block
        >下一步</van-button
      >
    </div>
    <!-- 弹框   显示支付成功 -->
    <!-- 底部弹框    选择支付方式 -->
    <van-action-sheet class="payment_type" v-model="paymentType">
      <div class="content">
        <div class="top">
          <p class="money">￥<span>15元</span></p>
          <p class="discounts">
            <span style="background: red; color: #fff">减</span
            ><span class="yet_dis">已优惠8元 ></span>
          </p>
        </div>
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell center clickable @click="radio = '1'">
              <template #icon>
                <i class="iconfont icon-weixin pay_icon"></i>
              </template>
              <template #title>
                <p class="pay_type">微信支付 <span>安全保障</span></p>
                <p class="pay_txt">装运等额外费用可在司机装货后支付</p>
              </template>
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell center clickable @click="radio = '2'">
              <template #icon>
                <i class="iconfont icon-zhifubao pay_icon"></i>
              </template>
              <template #title>
                <p class="pay_type">支付宝 <span>安全保障</span></p>
                <p class="pay_txt">装运等额外费用可在司机装货后支付</p>
              </template>
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <div class="btn">
          <van-button color="#FF6500" type="primary" block @click="goToPay"
            >去支付</van-button
          >
          <van-button
            color="#000000"
            plain
            type="primary"
            block
            @click="cancelPay"
            >取消支付</van-button
          >
        </div>
      </div>
    </van-action-sheet>
    <!-- 弹框--输入密码 -->
    <van-dialog class="inp_pwd" v-model="inputPwd" :showConfirmButton="false">
      <div class="inp_pwd_top">
        <van-nav-bar
          title="请输入支付密码"
          left-arrow
          @click-left="onClickPayBack"
        />
      </div>
      <div class="price">
        <span>15元</span>
      </div>
      <div class="inp_pwd_demo">
        <van-password-input
          :value="pwd"
          :mask="false"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
      </div>
      <van-button
        type="primary"
        :disabled="!(pwd.length == 6)"
        block
        @click="submitPay"
        >立即支付</van-button
      >
    </van-dialog>
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="pwd"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
    <!-- 弹框  选择模式 -->
    <van-dialog v-model="immediatelyOff" title="选择模式">
      <van-picker
        title="标题"
        :columns="columns"
        @confirm="onConfirm2"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-dialog>
    <!-- 底部弹框   选择时间 -->
    <van-calendar v-model="year" :show-confirm="false" @confirm="onConfirm" />
    <!-- 底部弹框   选择日期 -->
    <van-action-sheet v-model="hour" title="时间选择">
      <van-datetime-picker
        v-model="currentDate"
        type="time"
        :show-toolbar="false"
        :filter="filter"
      />
    </van-action-sheet>
    <!-- 弹框2  输入备注 -->
    <van-dialog v-model="show2" title="输入备注" show-cancel-button>
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
    </van-dialog>
    <!-- 弹框1 选择额外需求-->
    <!-- @cancel="result = []" -->
    <van-dialog v-model="show" title="标题" show-cancel-button>
      <van-checkbox-group v-model="result">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in list"
            clickable
            :key="index"
            :title="item.name"
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox :name="item" ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-dialog>
  </div>
</template>
<script>
import { Toast, Dialog } from "vant";
import PriceBox from "../components/PriceBox";
export default {
  components: { PriceBox },
  data: () => ({
    activeName: "a",
    checked: true,
    show: false,
    show2: false,
    year: false,
    hour: false,
    immediatelyOff: false, //即时
    yearDate: "2021-1-22",
    currentDate: "",
    message: "",
    columns: ["即时", "预约"],
    columnsMsg: "即时",
    relation: {
      phone: "13209377836",
      name: "王麻子",
    },
    paymentType: false,
    actions: [{ name: "微信支付" }, { name: "支付宝支付" }],
    radio: "1",
    inputPwd: false,
    pwd: "",
    showKeyboard: false,
    // list: [{name:"搬运（与司机另议）",val:0}, "返程（附加40%路费）","小推车（免费）","拍照回单（免费）","纸质回单（武汉）"],
    list: [
      { name: "搬运（与司机另议）", val: 0 },
      { name: "返程（附加40%路费）", val: 1 },
      { name: "小推车（免费）", val: 2 },
      { name: "拍照回单（免费）", val: 3 },
      { name: "纸质回单（武汉）", val: 4 },
    ],
    result: [],
  }),
  created() {
    this.yearDate = this.formatDate(new Date());
    this.currentDate = this.getHour();
  },
  watch: {
    pwd(newVal) {
      if (newVal.length >= 6) {
        console.log(newVal);
        this.pwd = newVal.substr(0, 6);
        this.showKeyboard = false;
      }
    },
  },
  methods: {
    // 提交支付
    submitPay() {
      Toast.loading({
        message: "支付中...",
        forbidClick: true,
      });
      setTimeout(() => {
        this.inputPwd = false;
        this.showKeyboard = false;
        Dialog.alert({
          title: `${this.radio =="1"?"微信":this.radio=="2"?"支付宝":""}支付成功`,
          message: "请等待订单匹配附近的司机",
        }).then(() => {
          // on close
          console.log('确定了');
          this.$router.push("/indent");
        });
        // 跳转订单页
        // setTimeout(() => {
        //   
        // }, 600);
      }, 2000);
    },
    // 点击输入密码中的返回按钮
    onClickPayBack() {
      this.paymentType = true;
      this.inputPwd = false;
      this.showKeyboard = false;
    },
    // 取消支付
    cancelPay() {
      this.paymentType = false;
      Toast("操作-取消");
    },
    // 去支付
    goToPay() {
      this.paymentType = false;
      if (this.radio == "1") {
        // 微信支付
        this.inputPwd = true;
        this.showKeyboard = true;
      } else if (this.radio == "2") {
        // 支付宝支付
        this.inputPwd = true;
        this.showKeyboard = true;
      }
    },
    // 点击下一步
    nextStep() {
      this.$router.push("/pay");
    },
    //   查找通讯录
    findPerson() {
      console.log("findPerson");
    },
    filter(type, options) {
      // console.log(options);
      if (type === "minute") {
        return options.filter((option) => option % 5 === 0);
      }
      return options;
    },
    //   弹框选状态
    onConfirm2(value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
      this.columnsMsg = value;
    },
    onCancel() {
      console.log("取消");
    },
    //选择年月日
    formatDate(date) {
      return `${date.getFullYear()}-${(date.getMonth() + 1 + "").padStart(
        2,
        0
      )}-${(date.getDate() + "").padStart(2, 0)}`;
    },
    getHour() {
      const date = new Date();
      return `${(date.getHours() + "").padStart(2, 0)}:${(
        date.getMinutes() +
        1 +
        ""
      ).padStart(2, 0)}`;
    },
    onConfirm(date) {
      console.log(date);
      this.year = false;
      this.yearDate = this.formatDate(date);
    },
    //   修改订单
    modificationOrder() {
      console.log("修改订单");
    },
    // 点击弹窗的选项
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    onClickLeft() {
      //   console.log("left");
      this.$router.go(-1);
    },
  },
};
</script>